<template>
  <div>
    <!-- 表格 -->
    <el-table
      :data="pestList.records"
      style="width: 100%"
      text-align="center"
      height="180"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      :header-cell-style="{ fontSize: '15px', color: 'rgb(83, 79, 79)' }"
      border
    >
      <!-- <el-table-column property="pestId" width="50"> </el-table-column> -->
      <el-table-column fixed prop="pestName" label="名称" width="335">
      </el-table-column>
      <el-table-column prop="pestHost" label="寄主" width="345">
      </el-table-column>
      <el-table-column prop="pestHarm" label="主要危害" width="340">
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pestList.pages * 10"
      @click="get()"
      @current-change="handleChange"
      style="margin-left: 100px; margin-bottom: 100px"
    >
    </el-pagination>

    <!-- 添加新虫害 -->
    <div style="text-align: left">
      <el-button
        type="info"
        @click="dialogFormVisible = true"
        style="
          width: 100px;
          margin-right: 30px;
          margin-left: 70px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >添加新虫害</el-button
      >
      <el-dialog
        title="添加虫害"
        :visible.sync="dialogFormVisible"
        width="60%"
        custom-class="customClass"
      >
        <div style="display: flex" class="msg">
          <div>
            <p style="margin: 50px 30px">
              名称：<input type="text" v-model="pestName" />
            </p>
            <p style="margin: 50px 30px">
              繁殖：<input type="text" v-model="pestBreed" />
            </p>
            <p style="margin: 50px 30px">
              幼虫图片：<el-upload
              class="avatar-uploader"
              action="/api/upload/upload"
              :http-request="testUpload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload" >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:50px;height:50px"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </p>
            <p style="margin: 50px 30px">
              防治措施：<input type="text" v-model="pestControl" />
            </p>
          </div>
          <div>
            <p style="margin: 50px 30px">
              寄主：<input type="text" v-model="pestHost" />
            </p>
            <p style="margin: 50px 30px">
              天敌：<input type="text" v-model="pestNatural" />
            </p>
            <p style="margin: 50px 30px">
              成虫图片：<el-upload
              class="avatar-uploader"
              action="/api/upload/upload"
              :http-request="testUpload2"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload" >
              <img v-if="image" :src="image" class="avatar" style="width:50px;height:50px"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </p>
            <p style="margin: 50px 30px">
              主要危害：<input type="text" v-model="pestHarm" />
            </p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addPest()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 查看详细信息 -->
      <el-button
        type="info"
        @click="findId(pestId)"
        style="
          width: 107px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >查看详细信息</el-button
      >
      <el-dialog
        title="虫害详细信息"
        :visible.sync="dialogVisible"
        width="650px"
        :before-close="handleClose"
      >
        <div class="msg" style="display: flex">
          <div style="width: 300px">
            <p style="margin: 50px 30px">名称：{{ list.pestName }}</p>
            <p style="margin: 50px 30px">繁殖： {{ list.pestBreed }}</p>
            <p style="margin: 50px 30px">寄主：{{ list.pestHost }}</p>
            <p style="margin: 50px 30px">天敌:{{ list.pestNatural }}</p>
            <p style="margin: 50px 30px">防治措施：{{ list.pestControl }}</p>
          </div>
          <div style="width: 300px;">
            <p style="margin: 50px 30px">
              <img :src="'/api'+list.pestXImg" alt="哦豁，图片找不到瓜了" />
            </p>
            <p style="margin: 50px 30px">
              <img :src="'/api'+list.pestDImg" alt="哦豁，图片找不到瓜了" />
            </p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 模糊查询 -->
      <session>
        <div>
          <fieldset style="width: 200px">
            <legend>查询虫害信息</legend>
            <form action="" style="width: 260px">
              寄&nbsp;虫&nbsp;名&nbsp;&nbsp;<input
                type="text"
                v-model="pestName"
                style="margin-top: 20px"
              />
              寄&nbsp;&nbsp;&nbsp;主<input
                type="text"
                v-model="pestHost"
                style="margin: 20px"
              />
              <br />
              <input
                type="button"
                value="查询"
                @click="get()"
                style="margin-left: 140px"
              />
            </form>
          </fieldset>
        </div>
      </session>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogVisible: false,
      formLabelWidth: "70px",
      pestId: "",
      pestName: "", //名称
      pestHost: "", //寄主
      pestBreed: "", //繁殖
      pestNatural: "", //天敌
      pestXImg: "", //幼虫图片
      pestDImg: "", //成虫图片
      pestHarm: "", //危害
      pestControl: "", //防治措施
      pageNo: "",
      pages: "",
      list: [],
      imageUrl:"",
      image:""
    };
  },
  computed: {
    ...mapState("pest", ["pestList", "pestParam"]),
  },
  methods: {
    ...mapMutations("pest", ["setPestParam"]),
    ...mapActions("pest", ["findAllPest"]),
    ...mapActions("pest",["findName"]),
    async addPest() {
      let parmaObj = {
        pestName: this.pestName,
        pestHost: this.pestHost,
        pestBreed: this.pestBreed,
        pestNatural: this.pestNatural,
        pestXImg: this.pestXImg,
        pestDImg: this.pestDImg,
        pestHarm: this.pestHarm,
        pestControl: this.pestControl,
      };
      let info = await this.ajax.getSubmit("/api/pest/addPest", parmaObj);
      console.log(info);
      if (info != null) {
        alert("添加成功！");
      } else {
        alert("不能为空！");
      }
      this.dialogFormVisible = false;
      this.findAllPest();
    },
    async findId(pestId) {
      let paramObj = { pestId: this.pestId };
      let info = await this.ajax.getSubmit("/api/pest/findId", paramObj);
      console.log(info);
      this.list = info;
      this.dialogVisible = true;
    },
     async findId2(wormId) {
      let paramObj = { wormId: this.wormId };
      let info = await this.ajax.getSubmit("/api/worm/findId", paramObj);
      console.log(info);
      this.list = info;
      this.dialogVisible = true;
    },
    async testUpload(item) {
      let info = await this.ajax.uploadSubmit("/api/upload/upload", {
        file: item.file,
      });
      console.log(info);
      this.imageUrl = "/api/img/" + info;
      this.pestXImg = "/img/" + info;
    },
    async testUpload2(item) {
      let info = await this.ajax.uploadSubmit("/api/upload/upload", {
        file: item.file,
      });
      console.log(info);
      this.image = "/api/img/" + info;
      this.pestDImg = "/img/" + info;
    },
     beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    get() {
      let paramObj = this.pestParam;
      paramObj.pestName = this.pestName;
      paramObj.pestHost = this.pestHost;
      // 把最新的信息装入 store中的 param对象中
      this.setPestParam(paramObj);
      this.findName()
    },
    handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    cut(pageNo) {
      let paramObj = this.pestParam;
      paramObj.pageNo = pageNo;
      this.setPestParam(paramObj);
      this.findAllPest();
    },
    handleTableRow(row) {
      console.log(row.pestId);
      this.pestId = row.pestId;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  created() {
    this.findAllPest();
    console.log(this.pestList.records);
     console.log(this.pestList.pages);
  },
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}
div > div > session {
  position: relative;
}
div > div > session > div:first-child {
  position: absolute;
  left: 330px;
  bottom: -75px;
}
.customClass {
  /* height: 60%; */
}
#input1 {
  height: 28px;
}
#fieldset {
  text-align: right;
}
</style>